<!DOCTYPE html>
<html lang="en" class="app">
<head>
  <meta charset="utf-8" />
  <title>Notebook | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="js/fuelux/fuelux.css" type="text/css"/>
  <link rel="stylesheet" href="css/app.css" type="text/css" />
  <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
  <section class="vbox">

    <section>
      <section class="hbox stretch">
        <section id="content">
          <section class="vbox">
            <section class="scrollable padder">
              <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#">UI kit</a></li>
                <li><a href="#">Table</a></li>
                <li class="active">Datagrid</li>
              </ul>
              <div class="m-b-md">
                <h3 class="m-b-none">Datagrid</h3>
              </div>

                  <div style="margin-bottom:10px;">
                    <div class="btn-group" data-toggle="buttons">
                      <label class="btn btn-sm btn-default active">
                        <input type="radio" name="options" id="option1"> 添加商品
                      </label>
                      <label class="btn btn-sm btn-default">
                        <input type="radio" name="options" id="option2"> 全部商品
                      </label>
                    </div>
                  </div>

              <section class="panel panel-default">
                <header class="panel-heading">
                  全部商品列表
                  <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i> 
                </header>
                <div class="table-responsive">
                  <table id="MyStretchGrid" class="table table-striped datagrid m-b-sm">
                    <tr>
                      <th>商品名称</th>
                      <th>型号</th>
                      <th>编号</th>
                      <th>说明</th>
                      <th>操作</th>
                    </tr>
                    <tr>
                      <td>Mexico City</td>
                      <td>MX</td>
                      <td>12294193</td>
                      <td>capital of a political entity</td>
                      <td>
                        <a href="#">编辑</a> | <a href="#">删除</a>
                      </td>
                    </tr>
                    <tr>
                      <td>Mexico City</td>
                      <td>MX</td>
                      <td>12294193</td>
                      <td>capital of a political entity</td>
                      <td><a href="modal.html?geonameid=3530597" data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td>Mexico City</td>
                      <td>MX</td><td>12294193</td>
                      <td>capital of a political entity</td>
                      <td><a href="modal.html?geonameid=3530597" data-toggle="ajaxModal"><i class="fa fa-pencil"></i></a>
                      </td>
                    </tr>

                  </table>
                </div>
              </section>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script> 
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
  <!-- fuelux -->
<script src="js/libs/underscore-min.js"></script>
<script src="js/fuelux/fuelux.js"></script>
<script src="js/fuelux/demo.datagrid.js"></script>
  <script src="js/app.plugin.js"></script>
</body>
</html>